<template>
  <div class="mepage">
    <!-- 顶部 -->
    <div class="mepage-top">
      <div class="mepage-top-left" @click="backBtn">
        <img src="../images/leftjiantou.png" alt="" />
      </div>
      <div class="mepage-top-center">
        <p>我的火火</p>
      </div>
      <div class="mepage-top-right" @click.stop="seen = !seen">
        <img src="../images/more.png" alt="" />
      </div>
      <!-- 顶部导航 -->
      <div class="mepageNav" v-if="seen">
        <div class="mepageNav-div">
          <div>
            <img class="mepageNav-img" src="../images/shouye.png" alt="" />
          </div>
          <p class="mepageNav-title" @click="btnClick('/')">首页</p>
        </div>
        <div class="mepageNav-div">
          <div>
            <img class="mepageNav-img" src="../images/fenlei.png" alt="" />
          </div>
          <p class="mepageNav-title" @click="btnClick('/classify')">分类搜索</p>
        </div>
        <div class="mepageNav-div">
          <div>
            <img class="mepageNav-img" src="../images/wode.png" alt="" />
          </div>
          <p class="mepageNav-title" @click="btnClick('/mepage')">我的火火</p>
        </div>
        <div class="mepageNav-div">
          <div>
            <img class="mepageNav-img" src="../images/zuji.png" alt="" />
          </div>
          <p class="mepageNav-title">浏览记录</p>
        </div>
        <div class="mepageNav-div">
          <div>
            <img class="mepageNav-img" src="../images/guanzhu.png" alt="" />
          </div>
          <p class="mepageNav-title">我的关注</p>
        </div>
        <div class="mepageNav-div">
          <div>
            <img class="mepageNav-img" src="../images/fenxiang.png" alt="" />
          </div>
          <p class="mepageNav-title noborder">分享</p>
        </div>
      </div>
    </div>
    <!-- 中间 -->
    <div class="mepage-middle">
      <!-- 用户信息 -->
      <div class="mepage-middle-information">
        <div class="information-top" @click="btnClickA(information.shezhiUrl)">
          <div class="information-top-left">
            <img :src="information.touxiang" alt="" />
          </div>
          <div class="information-top-center">
            <p class="information-top-center-p1">
              <span>hKgMRIRMXXGa</span>
              <img :src="information.nameImg" alt="" />
            </p>
            <p class="information-top-center-p2">京享值</p>
          </div>
          <div class="information-top-rigth">
            <img :src="information.shezhiImg" alt="" />
          </div>
        </div>
        <div class="information-middle">
          <div class="information-middle-div" @click="btnClickA('https://wqs.jd.com/my/fav/goods_fav.shtml?sceneval=2&jxsid=16238048020883140730&ptag=7155.1.8')">
            <span>0</span>
            <p>商品收藏</p>
          </div>
          <div class="information-middle-div" @click="btnClickA('https://wqs.jd.com/my/fav/shop_fav.shtml?sceneval=2&jxsid=16238048020883140730&ptag=7155.1.9')">
            <span>1</span>
            <p>店铺收藏</p>
          </div>
          <div class="information-middle-div" @click="btnClickA('https://wqs.jd.com/wxsq_project/mhistory/index.html?sceneval=2&jxsid=16238048020883140730&ptag=7155.1.10')">
            <span>4</span>
            <p>我的足迹</p>
          </div>
        </div>
        <div class="information-bottom" @click="btnClickA('https://plus.m.jd.com/index?sceneval=2&jxsid=16238048020883140730&flow_system=myhome&flow_entrance=myhome2&flow_channel=m')">
          <div class="information-bottom-left">
            <img :src="information.plus" alt="" />
          </div>
          <div class="information-bottom-center">
            <p>免费试用 立领1张运费券</p>
          </div>
          <div class="information-bottom-right">
            <p>
              <span>0元试用</span>
              <img :src="information.youjiantou" alt="" />
            </p>
          </div>
        </div>
      </div>
      <!-- 订单 -->
      <div class="mepage-dingdan">
        <div class="dingdan-div" v-for="item in dingdanItems" :key="item.id" @click="btnClickA(item.url)">
          <img :src="item.img" alt="" />
          <p>{{ item.text }}</p>
        </div>
      </div>
      <!-- 资产 -->
      <div class="mepage-zichan">
        <div class="zichan-div" @click="btnClickA('https://wqs.jd.com/my/coupon/index.shtml?sceneval=2&jxsid=16238048020883140730&ptag=7155.1.18')">
          <p class="zichan-p1">0</p>
          <p class="zichan-p2">优惠券</p>
        </div>
        <div class="zichan-div" @click="btnClickA('https://bt.jd.com/v3/mobile/rGuide_initGuideMobile?sceneval=2&jxsid=16238048020883140730&channelName=177&source=JD_m#/')">
          <p class="zichan-p11">开通有礼</p>
          <p class="zichan-p2">白条</p>
        </div>
        <div class="zichan-div" @click="btnClickA('https://wqs.jd.com/my/jingdou/my.shtml?sceneval=2&jxsid=16238048020883140730&ptag=7155.1.17')">
          <p class="zichan-p1">149</p>
          <p class="zichan-p2" >火豆</p>
        </div>
        <div class="zichan-div" @click="btnClickA('https://wqs.jd.com/my/redpacket.shtml?sceneval=2&jxsid=16238048020883140730&ptag=7155.1.44')">
          <p class="zichan-p1">0</p>
          <p class="zichan-p2">红包</p>
        </div>
        <div class="zichan-div" @click="btnClickA('https://wqs.jd.com/my/asset.html?sceneval=2&jxsid=16238048020883140730&ptag=7155.1.58')">
          <p class="zichan-p1">
            <img src="../images/zichan.png" alt="" />
          </p>
          <p class="zichan-p2">我的资产</p>
        </div>
      </div>
      <!-- 工具 -->
      <div class="mepage-tool">
        <div class="tool-top">
          <p>工具与服务</p>
        </div>
        <div class="tool-bottom">
          <div class="tool-div" v-for="item in toolItems" :key="item.id" @click="btnClickA(item.url)">
            <img :src="item.img" alt="" />
            <p>{{ item.text }}</p>
          </div>
        </div>
      </div>
      <!-- 推荐 -->
      <div class="mepage-tuijian">
        <img src="../images/tuijianleft.png" alt="" />
        <span>为你推荐</span>
        <img src="../images/tuijianright.png" alt="" />
      </div>
      <!-- 楼层 -->
      <div class="mepage-floor">
        <div
          class="mepage-floor-div"
          v-for="item in floorItems"
          :key="item.id"
          @click="btnClickA(item.url)"
        >
          <div class="mepage-floor-top">
            <img class="mepage-floor-img" :src="item.img" alt="" />
          </div>
          <div class="mepage-floor-middle">
            <img class="mepage-floor-shopImg" :src="item.shopImg" alt="" />
            <p class="mepage-floor-msg">{{ item.msg }}</p>
          </div>
          <div class="mepage-floor-bottom">
            <p class="mepage-floor-price">￥{{ item.price }}</p>
            <p class="mepage-floor-active">{{ item.active }}</p>
          </div>
        </div>
      </div>
      <!-- 京东商标 -->
      <div class="jingdong2">
        <img class="jingdong2-img" src="../images/jingdong2.png" alt="" />
      </div>
      <!-- 底部 -->
      <div class="mepage-footer">
        <div class="mepage-footer-top">
          <p
            @click="
              btnClickA(
                'https://plogin.m.jd.com/login/login?appid=100&kpkey=&returnurl=http%3A%2F%2Fhome.m.jd.com%2FmyJd%2Fhome.action'
              )
            "
          >
            登录
          </p>
          <p
            @click="
              btnClickA(
                'https://plogin.m.jd.com/mreg/index?appid=461&returnurl=http%3A%2F%2Fhome.m.jd.com%2FmyJd%2Fhome.action&ipChanged='
              )
            "
          >
            注册
          </p>
          <p
            @click="
              btnClickA(
                'https://plogin.m.jd.com/login/login?appid=300&returnurl=https%3A%2F%2Fwqlogin1.jd.com%2Fmlogin%2Fmpage%2FMpLoginRedirect%3Fmonitor%3D26804750782718814-1623299259-133643-8176055527424396691%26state%3Dd315fe641bdedbea68ee0db2822f41d3'
              )
            "
          >
            客服服务
          </p>
          <p>
            <a href="#">返回顶部</a>
          </p>
        </div>
        <div class="mepage-footer-middle">
          <div
            @click="
              btnClickA(
                'https://h5.m.jd.com/active/download/download.html?channel=jd-m'
              )
            "
          >
            <img src="../images/kehuduan.png" alt="" />
          </div>
          <div @click="btnClickA('https://www.jd.com/#m')">
            <img src="../images/guojiban.png" alt="" />
          </div>
          <div @click="btnClickA('https://www.jd.com/#m')">
            <img src="../images/diannaoban.png" alt="" />
          </div>
        </div>
        <div class="mepage-footer-copy">
          <p>Copyright © 2004-2020 火火HH.com 版权所有</p>
        </div>
      </div>
    </div>
     <!-- 返回顶部按钮 -->
    <a href="#" class="backTop" :style="{zIndex:backTop}">
      <img src="../images/backTop2.png" alt="" />
    </a>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "./Footer.vue";
export default {
  components: { Footer },
  name: "MePage",
  data() {
    return {
      seen: false,
      information: {},
      dingdanItems: [],
      toolItems: [],
      floorItems: [],
      backTop:-1
    };
  },
  methods: {
    backBtn() {
      this.$router.push({
        path: "/",
      });
    },
    btnClick(hash) {
      this.$router.push({
        path: hash,
      });
    },
    btnClickA(url) {
      window.location.href = url;
    },
    
  },
  mounted() {
    let that = this;
    document.addEventListener("click", function () {
      that.seen = false;
    });
     window.addEventListener("scroll", function (e) {
      let top = e.target.scrollingElement.scrollTop;
      
       
        if (top > 500) {
          that.backTop = 999;
        } else {
          that.backTop = -1;
        }
     
    });
  },
  computed:{
      denglu(){
        return this.$store.state.denglu
      }
  },

  created() {
  window.parent.scrollTo(0, 0)
    let that = this;

    let url = "./data/index.json";
    this.axios
      .get(url)
      .then(function (response) {
        that.information = response.data.MePage.information;
        that.dingdanItems = response.data.MePage.dingdan;
        that.toolItems = response.data.MePage.tool;
        that.floorItems = response.data.MePage.floor;
      })
      .catch(function (error) {
        console.log(error);
      });
  },
};
</script>

<style scoped>
.mepage {
  overflow-y: auto;
  overflow-x: hidden;
}
/* d顶部 */
.mepage-top {
  width: 100%;
  height: 2.75rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}
.mepage-top-center {
  flex: 1;
}
.mepage-top-center p {
  text-align: center;
  color: #252525;
}
.mepage-top-left,
.mepage-top-right {
  width: 2.5rem;
  height: 2.75rem;
  display: flex;
  justify-content: center;
}
.mepage-top-left div,
.mepage-top-right div {
  width: 2rem;
  height: 2rem;
  margin: auto;
  border-radius: 50%;
  display: flex;
}
.mepage-top-left img,
.mepage-top-right img {
  width: 1.25rem;
  height: 1.25rem;
  margin: auto;
  margin: auto;
}
/* 顶部导航 */
.mepageNav {
  width: 7.8125rem;
  height: 15.3125rem;
  position: absolute;
  top: 2.75rem;
  right: 1.25rem;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 0.3125rem;
}
.mepageNav-div {
  width: 100%;
  height: 2.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.mepageNav-div div {
  width: 2rem;
  height: 2rem;
  display: flex;
}
.mepageNav-img {
  width: 1.2rem;
  height: 1.2rem;
  margin: auto;
}
.mepageNav-title {
  width: 5.3125rem;
  font-size: 0.875rem;
  font-weight: 700;
  height: 2.5rem;
  line-height: 2.5rem;
  color: #fff;
  border-bottom: 1px solid #473636;
}
/* 中间 */
.mepage-middle {
  width: 100%;
  background-color: #f7f7f7;
}
.mepage-middle-information {
  width: 100%;
  background-image: url("https://img12.360buyimg.com/img/s1500x886_jfs/t1/115726/22/13102/240974/5f18fb83Ee40e230b/d4f2a67087fd443a.png");
  background-size: cover;
  padding-bottom: 0.625rem;
}
.information-top {
  width: 100%;
  height: 2.9375rem;
  display: flex;
  padding: 0.625rem 0 0.625rem 0.625rem;
}
.information-top-left {
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 50%;
  margin-right: 0.625rem;
}
.information-top-left img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.information-top-center {
  flex: 1;
}
.information-top-center-p1 {
  width: 100%;
  font-size: 1.125rem;
  color: #fff;
}
.information-top-center-p1 img {
  width: 0.9375rem;
  height: 0.9375rem;
  vertical-align: middle;
  border-radius: 50%;
}
.information-top-center-p2 {
  width: 3.25rem;
  height: 1rem;
  border-radius: 0.5rem;
  background-color: rgba(0, 0, 0, 0.2);
  margin-top: 0.625rem;
  font-size: 0.75rem;
  text-align: center;
  color: #fff;
}
.information-top-rigth {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 1.25rem;
}
.information-top-rigth img {
  width: 100%;
  height: 100%;
}
.information-middle {
  width: 100%;
  height: 3.125rem;
  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
}
.information-middle-div {
  width: 6.0625rem;
  height: 3.125rem;
  text-align: center;
  color: #fff;
}
.information-middle-div span {
  font-size: 1rem;
  font-weight: 700;
}
.information-middle-div p {
  font-size: 0.75rem;
  height: 2.125rem;
  line-height: 2.125rem;
}
.information-bottom {
  width: 18.125rem;
  height: 2.625rem;
  margin: 0.625rem 1.25rem;
  display: flex;
  align-items: center;
  background-image: url("https://img12.360buyimg.com/img/s678x99_jfs/t1/112839/2/12981/33105/5f17e12aE602bb83e/8a736742745d79cf.png");
  background-size: cover;
}
.information-bottom-left {
  width: 4.1875rem;
  height: 0.75rem;
  display: flex;
  border-right: 1px solid #ffe678;
  margin-left: 0.625rem;
}
.information-bottom-left img {
  width: 3.5625rem;
  height: 0.75rem;
}
.information-bottom-center {
  flex: 1;
  padding-left: 0.625rem;
}
.information-bottom-center p {
  font-size: 0.75rem;
  color: #ffe678;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 7rem;
}
.information-bottom-right {
  width: 4.375rem;
  border-radius: 9px;
  line-height: 1.125rem;
  text-align: center;
  flex-shrink: 0;
  height: 1.125rem;
  background-color: #ffe678;
  margin-right: 0.625rem;
}
.information-bottom-right p {
  color: #262626;
  font-size: 0.75rem;
}
.information-bottom-right p img {
  width: 0.75rem;
  height: 0.7rem;
}
/* 订单 */
.mepage-dingdan {
  width: 100%;
  height: 5rem;
  border-radius: 0.625rem;
  position: relative;
  top: -0.625rem;
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  padding-top: 1rem;
}
.dingdan-div {
  width: 4.5625rem;
  height: 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.dingdan-div img {
  width: 1.875rem;
  height: 1.875rem;
}
.dingdan-div p {
  font-size: 0.75rem;
  color: #262626;
  margin-top: 0.3125rem;
}
/* 资产 */
.mepage-zichan {
  width: 100%;
  height: 5rem;
  display: flex;
  justify-content: space-around;
  border-radius: 0.625rem;
  background-color: #fff;
  margin-top: 0.625rem;
}
.zichan-div {
  width: 3.625rem;
  height: 5rem;
  text-align: center;
  color: #262626;
  padding-top: 0.875rem;
}
.zichan-p1 {
  font-size: 1rem;
  font-weight: 700;
  height: 1.875rem;
  line-height: 1.875rem;
}
.zichan-p11 {
  font-weight: 700;
  height: 1.875rem;
  line-height: 1.875rem;
  font-size: 0.75rem;
  font-weight: 700;
}
.zichan-p2 {
  font-size: 0.75rem;
  margin-top: 0.625rem;
}
.zichan-p1 img {
  width: 1.875rem;
  height: 1.875rem;
  margin: 0 auto;
}
/* 工具 */
.mepage-tool {
  width: 100%;
  height: 12.25rem;
  border-radius: 0.625rem;
  margin-top: 0.625rem;
  background-color: #fff;
}
.tool-top {
  width: 100%;
  height: 2.375rem;
  padding-left: 1.125rem;
}
.tool-top p {
  line-height: 2.375rem;
  font-size: 0.875rem;
  color: #2e2d2d;
  border-bottom: 1px solid #f8f8f8;
}
.tool-bottom {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-bottom: 0.625rem;
}
.tool-div {
  width: 5rem;
  height: 4.625rem;
  margin-top: 0.625rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tool-div img {
  width: 2.1875rem;
  height: 2.1875rem;
  border-radius: 50%;
}
.tool-div p {
  font-size: 0.75rem;
  color: #262626;
  margin-top: 0.3125rem;
}
.mepage-tuijian {
  width: 100%;
  height: 2.625rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mepage-tuijian span {
  font-size: 0.75rem;
  color: #999;
  margin: 0 0.625rem;
}
/* 楼层 */
.mepage-floor {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.mepage-floor-div {
  width: 9.6875rem;
  height: 13.625rem;
  margin-right: 0.3125rem;
  border-radius: 0.625rem;
  background-color: #fff;
  box-sizing: border-box;
  padding: 0.625rem 0.625rem 0;
  margin-bottom: 0.625rem;
}
.mepage-floor-top {
  display: flex;
  width: 100%;
  height: 8.0625rem;
  justify-content: center;
}
.mepage-floor-img {
  width: 8.0625rem;
  height: 8.0625rem;
}
.mepage-floor-middle {
  width: 100%;
  height: 2.25rem;
  margin-top: 0.625rem;
  position: relative;
}
.mepage-floor-shopImg {
  width: 3.1875rem;
  height: 0.875rem;
}
.mepage-floor-msg {
  position: absolute;
  top: 0;
  text-indent: 3.5rem;
  font-size: 0.75rem;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -moz-box;
  -moz-line-clamp: 2;
  -moz-box-orient: vertical;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
}
.mepage-floor-bottom {
  width: 100%;
  height: 1.3125rem;
  margin-top: 0.3125rem;
  color: #e4393c;
  display: flex;
  align-items: center;
}
.mepage-floor-price {
  font-size: 1rem;
}
.mepage-floor-active {
  font-size: 0.75rem;
  width: 1.875rem;
  height: 0.9375rem;
  text-align: center;
  line-height: 0.9375rem;
  margin-left: 0.3125rem;
  border: 1px solid #e4393c;
}
/* 京东图标 */
.jingdong2 {
  width: 100%;
  height: 6.875rem;
  background-color: #fff;
  display: flex;
  justify-content: center;
}
.jingdong2-img {
  width: 12.5rem;
  height: 2.5rem;
  margin-top: 1.875rem;
}
/* 底部 */
.mepage-footer {
  background-color: #fff;
  margin-bottom: 2.8125rem;
}
.mepage-footer-top {
  width: 100%;
  height: 3.125rem;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}
.mepage-footer-top p {
  width: 5.1875rem;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  border-right: 1px solid #e5e5e5;
  color: #848686;
  font-size: 0.875rem;
}
.mepage-footer-top p:nth-last-child() {
  border-right: 0;
}
.mepage-footer-middle {
  width: 100%;
  height: 4.3125rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid #e5e5e5;
}
.mepage-footer-middle div {
  width: 7.4375rem;
  height: 3.75rem;
  display: flex;
}
.mepage-footer-middle div img {
  width: 3.75rem;
  height: 3.75rem;
  margin: 0 auto;
}
.mepage-footer-copy {
  width: 100%;
  height: 2.0625rem;
  line-height: 2.0625rem;
  text-align: center;
  color: #848686;
  font-size: 0.75rem;
}
/* 返回顶部按钮 */
a {
  text-decoration: none;
}
.backTop {
  width: 2.8125rem;
  height: 2.8125rem;
  border-radius: 0.625rem;
  position: fixed;
  right: 0.625rem;
  bottom: 6.875rem;
  display: flex;
  background-color: rgba(0, 0, 0, 0.8);
}
.backTop img {
  width: 50%;
  height: 50%;
  margin: auto;
}
</style>
